<template>
  <a-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel">
    <a-spin :spinning="confirmLoading">
      <!-- 主表单区域 -->
      <a-form :form="form">
        <a-row>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="SPU 名字">
              <a-input placeholder="请输入SPU 名字" v-decorator="['name', validatorRules.name ]"/>
            </a-form-item>
          </a-col>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="副标题">
              <a-input placeholder="请输入副标题" v-decorator="['caption', {}]"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="店铺_id">
              <a-input placeholder="请输入店铺_id" v-decorator="['shopId', {}]"/>
            </a-form-item>
          </a-col>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="商家ID">
              <a-input placeholder="请输入商家ID" v-decorator="['sellerId', {}]"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="默认SKU（待用）">
              <a-input placeholder="请输入默认SKU（待用）" v-decorator="['defaultItemId', {}]"/>
            </a-form-item>
          </a-col>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="品牌ID（待用）">
              <a-input placeholder="请输入品牌ID（待用）" v-decorator="['brandId', {}]"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="类目">
              <a-input placeholder="请输入类目" v-decorator="['categoryId', {}]"/>
            </a-form-item>
          </a-col>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="类目名称">
              <a-input placeholder="请输入类目名称" v-decorator="['categoryName', {}]"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="是否启用规格（待用）">
              <a-input placeholder="请输入是否启用规格（待用）" v-decorator="['isEnableSpec', {}]"/>
            </a-form-item>
          </a-col>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="模板类型ID（待用）">
              <a-input placeholder="请输入模板类型ID（待用）" v-decorator="['templateTypeId', {}]"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="审核（0：待审核。1审核通过，2审核失败/被拒绝）">
              <a-input placeholder="请输入审核（0：待审核。1审核通过，2审核失败/被拒绝）" v-decorator="['toExamine', {}]"/>
            </a-form-item>
          </a-col>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="卖点">
              <a-input placeholder="请输入卖点" v-decorator="['sellPoint', validatorRules.sellPoint ]"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="描述 （商品介绍）">
              <a-input placeholder="请输入描述 （商品介绍）" v-decorator="['description', validatorRules.description ]"/>
            </a-form-item>
          </a-col>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="分类编号（待用）">
              <a-input-number placeholder="请输入分类编号（待用）" style="width:100%" v-decorator="[ 'cid', {}]"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="商品主图地址">
              <a-input placeholder="请输入商品主图地址" v-decorator="['picUrls', validatorRules.picUrls ]"/>
            </a-form-item>
          </a-col>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="排序字段">
              <a-input-number placeholder="请输入排序字段" style="width:100%" v-decorator="[ 'sort', {}]"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="原价">
              <a-input-number placeholder="请输入原价" style="width:100%" v-decorator="[ 'price', {}]"/>
            </a-form-item>
          </a-col>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="库存数量（使用）spu库存">
              <a-input-number placeholder="请输入库存数量（使用）spu库存" style="width:100%" v-decorator="[ 'quantity', {}]"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="是否删除     (A 原 )（0：未删除，1：已删除）">
              <a-input placeholder="请输入是否删除     (A 原 )（0：未删除，1：已删除）" v-decorator="['deleted', validatorRules.deleted ]"/>
            </a-form-item>
          </a-col>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="商品限购数量">
              <a-input-number placeholder="请输入商品限购数量" style="width:100%" v-decorator="[ 'spuQuotaNum', {}]"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="是否上架商品（B 原是否可见）。 * 1为已上架* 0为已下架">
              <a-input placeholder="请输入是否上架商品（B 原是否可见）。 * 1为已上架* 0为已下架" v-decorator="['visible', validatorRules.visible ]"/>
            </a-form-item>
          </a-col>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="现价">
              <a-input-number placeholder="请输入现价" style="width:100%" v-decorator="[ 'presentPrice', {}]"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>

      <!-- 子表单区域 -->
      <a-tabs v-model="activeKey" @change="handleChangeTabs">
        <a-tab-pane tab="商品SKU" :key="refKeys[0]" :forceRender="true">
          <j-editable-table
            :ref="refKeys[0]"
            :loading="commoditySkuTable.loading"
            :columns="commoditySkuTable.columns"
            :dataSource="commoditySkuTable.dataSource"
            :maxHeight="300"
            :rowNumber="true"
            :rowSelection="true"
            :actionButton="true"/>
        </a-tab-pane>
      </a-tabs>

    </a-spin>
  </a-modal>
</template>

<script>

  import moment from 'moment'
  import pick from 'lodash.pick'
  import { FormTypes } from '@/utils/JEditableTableUtil'
  import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'

  export default {
    name: 'CommoditySpuModal',
    mixins: [JEditableTableMixin],
    data() {
      return {
        // 新增时子表默认添加几行空数据
        addDefaultRowNum: 1,
        validatorRules: {
          name: { rules: [{ required: true, message: '请输入SPU 名字!' }] },
          sellPoint: { rules: [{ required: true, message: '请输入卖点!' }] },
          description: { rules: [{ required: true, message: '请输入描述 （商品介绍）!' }] },
          picUrls: { rules: [{ required: true, message: '请输入商品主图地址' }] },
          deleted: { rules: [{ required: true, message: '请输入是否删除     (A 原 )（0：未删除，1：已删除）!' }] },
          visible: { rules: [{ required: true, message: '请输入是否上架商品（B 原是否可见）。 * 1为已上架* 0为已下架!' }] },
        },
        refKeys: ['commoditySku', ],
        activeKey: 'commoditySku',
        // 商品SKU
        commoditySkuTable: {
          loading: false,
          dataSource: [],
          columns: [
            {
              title: '商品标题',
              key: 'title',
              type: FormTypes.input,
              defaultValue: '',
              placeholder: '请输入${title}',
              validateRules: [{ required: true, message: '${title}不能为空' }],
            },
            {
              title: '商品卖点',
              key: 'sellPoint',
              type: FormTypes.input,
              defaultValue: '',
              placeholder: '请输入${title}',
            },
            {
              title: '价格，单位：分',
              key: 'price',
              type: FormTypes.inputNumber,
              defaultValue: '',
              placeholder: '请输入${title}',
              validateRules: [{ required: true, message: '${title}不能为空' }],
            },
            {
              title: '库存数量',
              key: 'quantity',
              type: FormTypes.inputNumber,
              defaultValue: '',
              placeholder: '请输入${title}',
              validateRules: [{ required: true, message: '${title}不能为空' }],
            },
            {
              title: '库存量（待用）',
              key: 'stockCount',
              type: FormTypes.inputNumber,
              defaultValue: '',
              placeholder: '请输入${title}',
            },
            {
              title: '图片地址',
              key: 'picUrl',
              type: FormTypes.input,
              defaultValue: '',
              placeholder: '请输入${title}',
            },
            {
              title: '品牌',
              key: 'brand',
              type: FormTypes.input,
              defaultValue: '',
              placeholder: '请输入${title}',
            },
            {
              title: '成本价',
              key: 'costPirce',
              type: FormTypes.inputNumber,
              defaultValue: '',
              placeholder: '请输入${title}',
            },
            {
              title: '市场价',
              key: 'marketPrice',
              type: FormTypes.inputNumber,
              defaultValue: '',
              placeholder: '请输入${title}',
            },
            {
              title: '商品编号(SPU_id)',
              key: 'spuId',
              type: FormTypes.input,
              defaultValue: '',
              placeholder: '请输入${title}',
              validateRules: [{ required: true, message: '${title}不能为空' }],
            },
            {
              title: '购物车，缩略图',
              key: 'cartThumbnail',
              type: FormTypes.input,
              defaultValue: '',
              placeholder: '请输入${title}',
            },
            {
              title: '条形码',
              key: 'barcode',
              type: FormTypes.input,
              defaultValue: '',
              placeholder: '请输入${title}',
            },
            {
              title: '是否默认',
              key: 'defaulted',
              type: FormTypes.input,
              defaultValue: '',
              placeholder: '请输入${title}',
            },
            {
              title: '审核（0：待审核。1审核通过）',
              key: 'toExamine',
              type: FormTypes.input,
              defaultValue: '',
              placeholder: '请输入${title}',
            },
            {
              title: '状态：1-正常，2-禁用，',
              key: 'status',
              type: FormTypes.inputNumber,
              defaultValue: '',
              placeholder: '请输入${title}',
              validateRules: [{ required: true, message: '${title}不能为空' }],
            },
            {
              title: '规格值({@link ProductAttrDO})数组数组，以逗号分隔',
              key: 'attrs',
              type: FormTypes.input,
              defaultValue: '',
              placeholder: '请输入${title}',
              validateRules: [{ required: true, message: '${title}不能为空' }],
            },
            {
              title: 'itemSn',
              key: 'itemSn',
              type: FormTypes.input,
              defaultValue: '',
              placeholder: '请输入${title}',
            },
            {
              title: 'version',
              key: 'version',
              type: FormTypes.inputNumber,
              defaultValue: '',
              placeholder: '请输入${title}',
              validateRules: [{ required: true, message: '${title}不能为空' }],
            },
            {
              title: '是否删除（0：未删除，1：已删除）',
              key: 'deleted',
              type: FormTypes.input,
              defaultValue: '',
              placeholder: '请输入${title}',
              validateRules: [{ required: true, message: '${title}不能为空' }],
            },
            {
              title: '商品限购数量',
              key: 'skuQuotaNum',
              type: FormTypes.inputNumber,
              defaultValue: '',
              placeholder: '请输入${title}',
            },
            {
              title: '商品销量',
              key: 'salesVolume',
              type: FormTypes.inputNumber,
              defaultValue: '',
              placeholder: '请输入${title}',
            },
            {
              title: '销量版本',
              key: 'volumeVersion',
              type: FormTypes.inputNumber,
              defaultValue: '',
              placeholder: '请输入${title}',
            },
          ]
        },
        url: {
          add: "/productspu/commoditySpu/add",
          edit: "/productspu/commoditySpu/edit",
          commoditySku: {
            list: '/productspu/commoditySpu/queryCommoditySkuByMainId'
          },
        }
      }
    },
    methods: {
 
      /** 调用完edit()方法之后会自动调用此方法 */
      editAfter() {
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'name', 'caption', 'shopId', 'sellerId', 'defaultItemId', 'brandId', 'categoryId', 'categoryName', 'isEnableSpec', 'templateTypeId', 'toExamine', 'sellPoint', 'description', 'cid', 'picUrls', 'sort', 'price', 'quantity', 'deleted', 'spuQuotaNum', 'visible', 'presentPrice', ))
          // 时间格式化
        })
        // 加载子表数据
        if (this.model.id) {
          let params = { id: this.model.id }
          this.requestSubTableData(this.url.commoditySku.list, params, this.commoditySkuTable)
        }
      },
 
      /** 整理成formData */
      classifyIntoFormData(allValues) {
        let main = Object.assign(this.model, allValues.formValue)
        //时间格式化
        return {
          ...main, // 展开
          commoditySkuList: allValues.tablesValue[0].values,
        }
      }
    }
  }
</script>

<style scoped>
</style>